<template>
  <view class="news-card">
    <!-- 标题插槽 -->
    <slot name="title">
      <text class="title">{{ Title }}</text>
    </slot>
	<view class="mainbox">
		<!-- 图片插槽-->
		<slot name="image">
			<image 
				v-if="Image" 
				:src="Image" 
				mode="aspectFill" 
				class="image"
			></image>
		</slot>

		<!-- 内容插槽 -->
		<slot name="content">
			<view class="content">
				<text class="content">{{ Content }}</text>
			</view>
		</slot>
	</view>
    

    <!-- 时间插槽 -->
    <slot name="time">
      <text class="time">{{ Time }}</text>
    </slot>
  </view>
</template>

<script>
export default {
  props: {
    Title: {
      type: String,
      default: '无标题'
    },
    Image: {
      type: String,
      default: ''
    },
    Content: {
      type: String,
      default: '无简介...'
    },
    Time: {
      type: String,
      default: '2025-01-01'
    }
  }
}
</script>

<style scoped>
.news-card {
  width: 100%;
  padding: 20rpx;
  border-bottom: 1rpx solid #eee;
  box-sizing: border-box; /* 包含padding在宽度内,不加会溢出 */
}

.mainbox {
  display: grid;
  grid-template-columns: 300rpx 1fr; /* 图片固定宽度，内容自适应 */
  gap: 20rpx;
}
/* .content {
  align-self: flex-start; 
} */
.title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 15rpx;
}

.image {
  width: 300rpx;
  height: 300rpx;
  border-radius: 8rpx;
  margin: 10rpx 0;
}

.content {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
}
 
.time {
  font-size: 24rpx;
  color: #999;
  display: block;
  text-align: right;
}
</style>